<template>
  <el-col class="areaScene-wrap" :span="24">
    <el-col :span="12">
      <el-select @change="firstLevelChange" v-model="modTypes.modType1" placeholder="请选择分类">
        <el-option label="全部分类" value=""></el-option>
        <el-option v-for="item in firstArr" :key="item.moduleId" :value="item.moduleId" :label="item.moduleName"></el-option>
      </el-select>
    </el-col>

    <el-col :span="12">
      <el-select @change="secondLevelChange" v-model="modTypes.modType2" placeholder="请选择子分类">
        <el-option label="全部子分类" :value="modTypes.modType1"></el-option>
        <el-option v-for="item in secondArr" :key="item.moduleId" :value="item.moduleId" :label="item.moduleName"></el-option>
      </el-select>
    </el-col>
  </el-col>

</template>

<script>
export default {
  name: 'sceneSelect',
  props: ['modTypes', 'selectModel', 'deptId'],
  data () {
    return {
      tempPromise: {},
      firstArr: [],
      secondArr: [],
      sceneId: this.selectModel,
      watchSwitch: false // 监听进入时的数据加载
    }
  },
  watch: {
    deptId (val) {
      this.modTypes.modType1 = ''
      this.modTypes.modType2 = ''
      this.$emit('onSceneChange', '')
      this.getSceneByAreaId(val)
    },
    selectModel (val) {
      // // 初次进入页面
      // if (!this.watchSwitch && val !== '') {
      //   this.tempPromise.then(resolve => {
      //     this.watchSwitch = true
      //     if (this.modTypes.modType1) {
      //       this.firstLevel(this.modTypes.modType1)
      //     }
      //     this.sceneId = val
      //   })
      // } else {
      //   this.sceneId = val
      // }
    },
    sceneId (val) {
      this.$emit('onSceneChange', val)
    }
  },
  mounted: function () {
    // this.tempPromise = this.getList()
  },
  methods: {
    // getList () {
    //   return new Promise(resolve => {
    //     let url = this.$base.getUrl('getModuleInfoTree')
    //     let params = {
    //       url: url,
    //       data: {}
    //     }
    //     this.$store.dispatch('getForm', params).then(res => {
    //       this.firstArr = res.nodes
    //       resolve()
    //     })
    //   })
    // },
    getSceneByAreaId (deptId) {
      let url = this.$base.getUrl('getModuleInfoTree')
      let params = {
        url: url,
        data: {
          deptId: deptId
        }
      }
      this.$store.dispatch('getForm', params).then(res => {
        let newNodes = []
        res.nodes.forEach((item) => {
          if (item.showFlag !== 0) {
            newNodes.push(item)
          }
        })
        this.firstArr = newNodes
        this.secondArr = []
      })
    },
    // 场景onchange事件
    firstLevelChange (res) {
      this.secondArr = []
      this.modTypes.modType2 = res
      for (let i of this.firstArr) {
        if (res === i.moduleId) {
          let newNodes = []
          i.nodes.forEach((item) => {
            if (item.showFlag !== 0) {
              newNodes.push(item)
            }
          })
          this.secondArr = newNodes
        }
      }
      this.sceneId = res
    },
    secondLevelChange (res) {
      if (!this.modTypes.modType2) {
        this.modTypes.modType2 = res
      }
      this.sceneId = res
    },
    firstLevel (res) {
      for (let i of this.firstArr) {
        if (res === i.moduleId) {
          this.secondArr = i.nodes || []
        }
      }
    }
  }
}
</script>

<style scoped>
  .areaScene-wrap {
    padding: 0 !important;
  }
</style>
